var UI = {
	screen 	: {
		bar	: 0,
		w : 0,
		h : 0,
		pos : {
			x : 0,
			y : 0
		}
	},
	board	: null,
	clicking	: false,
	tiles	: {
		num : {
			x : 0,
			y : 0
		},
		w : 0,
		h : 0,
		MAX : 6
	},
	colors		: null,
	colorsHigh	: null,
	colorsFall	: null,
	
	whileFalling	: null,
	fallingDist	: 0,
	whileSwitch	: null,
	whileRemove	: null,

	BLOCK		: false,
	REC		: false,

	actions	: null,
	
	start		: function(w, h, nx, ny){
		Draw.start();
		
		this.colors = new Array();
		this.colorsHigh = new Array();
		this.colorsFall = new Array();
		for(var n = 0; n < this.tiles.MAX; n++){
			var c = 100 - n * (100/this.tiles.MAX);
			this.colors.push(Draw.rgbColor(c, c, c));
			this.colorsHigh.push(Draw.rgbColor(c, c, 255));
			this.colorsFall.push(Draw.rgbColor(255, c, c));
		}
	
		this.screen.bar	= 20;
		this.screen.w	= w;
		this.screen.h	= h - this.screen.bar;
		this.tiles.num.x = nx;
		this.tiles.num.y = ny;

		this.screen.pos.x = canvas.offsetLeft;
		this.screen.pos.y = canvas.offsetTop;

		this.tiles.w = this.screen.w/this.tiles.num.x;
		this.tiles.h = this.screen.h/this.tiles.num.y;
		
		window.setInterval("UI.recursiveUpdate()", 100)
	},

	whichTile	: function(pos){
		var tileX = Math.floor(pos.x / this.tiles.w);
		var tileY = Math.floor(pos.y / this.tiles.h);
		if(tileX < 0){
			tileX = 0;
		}else if(tileX >= UI.tiles.num.x){
			tileX = UI.tiles.num.x-1;
		}
		
		if(tileY < 0){
			tileY = 0;
		}else if(tileY >= UI.tiles.num.y){
			tileY = UI.tiles.num.y-1;
		}
		
		return Tools.newCoord(tileX, tileY);
	},

	onMouseDown		: function(e){
		if(!this.BLOCK){
			UI.clicking	= true;
			var pos = UI.getCursorPosition(e);
			var tile = UI.whichTile(pos);
			Logic.onMouseDown(tile);
		}
	},

	onMouseMove		: function(e){
		if(UI.clicking){
			var pos	= UI.getCursorPosition(e);
			var tile = UI.whichTile(pos);
		}
		Logic.onMouseMove(tile);
	},
	
	onMouseUp		: function(e){
		UI.clicking	= false;
		var pos = UI.getCursorPosition(e);
		var tile = UI.whichTile(pos);
		Logic.onMouseUp();
	},

	getCursorPosition	: function(e) {
		var x;
		var y;
		if (e.pageX != undefined && e.pageY != undefined) {
			x = e.pageX;
			y = e.pageY;
		}else{
			var body = document.body;
			var element = document.documentElement;
			x = e.clientX + body.scrollLeft + element.scrollLeft;
			y = e.clientY + body.scrollTop + element.scrollTop;
		}
		x -= this.screen.pos.x;
		y -= this.screen.pos.y;
	
		return Tools.newCoord(x, y);
	},

	doStuff	: function(actions){
		if(actions != null){
			this.actions = actions;
		}
	},

	recursiveUpdate		: function(){
		if(!this.REC){
			this.BLOCK = true;
			this.recursiveActions();
		}
	},

	recursiveActions	: function(){
		if(this.actions.length > 0){
			var action = this.actions.shift();
			switch(action.action){
				case Tools.BOARD :
					console.log("BOARD");
					this.updateBoard(action.stuff);
					break;
				case Tools.SELECTION :
					console.log("Selection: [%s, %s]", action.stuff.x, action.stuff.y);
					this.updateSelection(action.stuff);
					break;
				case Tools.DESELECTION :
					console.log("Deselection: [%s, %s]", action.stuff.x, action.stuff.y);
					this.updateTile(action.stuff);
					break;
				case Tools.SCORE :
					//console.log("Score: %s", action.stuff);
					this.updateScore(action.stuff);
					break;
				case Tools.FALLING :
					console.log("Fall: %s", action.stuff.length);
					this.updateFallingREC(action.stuff);
					break;
				case Tools.REMOVE :
					console.log("Remove: %s", action.stuff.length);
					this.removeTilesREC(action.stuff);
					break;
				case Tools.SWITCH :
					console.log("Switch: [%s, %s] - [%s, %s]", action.stuff[0].x, action.stuff[0].y, action.stuff[1].x, action.stuff[1].y);
					this.switchTilesREC(action.stuff);
					//this.switchTiles(action.stuff[0], action.stuff[1]);
					break;
			}
		}else{
			this.BLOCK = false;
			//this.update(Logic.board, Logic.selection, Logic.score);
		}
	},

	update		: function(board, selection, score){
		for(var x = 0; x < board.length; x++){
			var gapX = x * this.tiles.w;
			for(var y = 0; y < board[x].length; y++){
				var gapY = y * this.tiles.h;
				var value = board[x][y];
				
				if(selection != null && x == selection.x && y == selection.y){
					this.drawTileHigh(gapX, gapY, value);
				}else{
					this.drawTile(gapX, gapY, value);
				}
			}
		}

		this.updateScore(score);
	},
	
	updateBoard	: function(board){
		this.board = board;
		this.clearScreen();
		for(var x = 0; x < board.length; x++){
			var gapX = x * this.tiles.w;
			for(var y = 0; y < board[x].length; y++){
				var gapY = y * this.tiles.h;
				var value = board[x][y];
				if(value > 0){
					this.drawTile(gapX, gapY, value);
				}
			}
		}
	},
	
	updateSelection	: function(tile){
		this.drawTileHigh(tile.x * this.tiles.w, tile.y * this.tiles.h, tile.v);
	},

	updateTile	: function(tile){
		this.drawTile(tile.x * this.tiles.w, tile.y * this.tiles.h, tile.v);
	},
	
	updateScore	: function(score){
		this.drawBar();
		if(score != null){
			Draw.text(Tools.newCoord(5, this.screen.h + 15), score);
		}
	},
	
	drawBar		: function(){
		var pos = Tools.newCoord(0, this.screen.h);
		Draw.rect(pos, this.screen.w, this.screen.bar, Draw.rgbColor(20,20,25), Draw.rgbColor(10,10,15));
	},
	
	removeTiles	: function(tiles){
		for(t in tiles){
			var tile = tiles[t];
			this.drawTileEmpty(tile.x * this.tiles.w, tile.y * this.tiles.h);
		}
	},
	
	removeTilesREC	: function(tiles){
		this.REC = true;
		
		if(tiles != null){
			this.whileRemove = tiles;
		}
		
		if(this.whileRemove.length > 0){
			var tile = this.whileRemove.pop();
			this.drawTileEmpty(tile.x * this.tiles.w, tile.y * this.tiles.h);
			window.setTimeout("UI.removeTilesREC()", 100);
		}else{
			this.REC = false;
		}
	},

	updateFalling	: function(falling){
		for(f in falling){
			var posx = falling[f].x * this.tiles.w;
			var posy = falling[f].y * this.tiles.h;
			var dist = falling[f].f * this.tiles.h;
			var val = falling[f].v;
			this.drawTileEmpty(posx, posy);
			this.drawTile(posx, posy + dist, val);
		}
	},

	updateFallingREC	: function(falling){
		this.REC = true;
		var d = this.tiles.h/4
		if(falling != null){
			this.whileFalling = falling;
			this.fallingDist = 0;
		}

		var lastDist = this.fallingDist;
		this.fallingDist += d;

		this.clearScreen();

		var fallen = false;
		var newFalling = new Array();
		for(f in this.whileFalling){
			var x = this.whileFalling[f].x * this.tiles.w;
			var y = this.whileFalling[f].y * this.tiles.h;
			var v = this.whileFalling[f].v;
			var f = this.whileFalling[f].f;
			
			if(f == 0){
				this.drawTile(x, y, v);
			}else{
				var tileDist = f * this.tiles.h;
				if(this.fallingDist <= tileDist){
					this.drawTileFall(x, y+this.fallingDist, v);
					fallen = true;
				}else{
					this.drawTile(x, y+tileDist, v);
				}
			}
		}
		this.updateScore(0);
		if(fallen){
			window.setTimeout("UI.updateFallingREC()", 100);
		}else{
			this.REC = false;
		}
	},
	
	switchTiles	: function(tileA, tileB){
		this.drawTile(tileA.x * this.tiles.w, tileA.y * this.tiles.h, tileB.v);
		this.drawTileHigh(tileB.x * this.tiles.w, tileB.y * this.tiles.h, tileA.v);
	},
	
	switchTilesREC	: function(tiles){
		if(tiles != null){
			this.whileSwitch = tiles;
			this.REC = true;
			window.setTimeout("UI.switchTilesREC()", 250);
		}else{
			var tileA = this.whileSwitch[0];
			var tileB = this.whileSwitch[1];
			this.drawTile(tileA.x * this.tiles.w, tileA.y * this.tiles.h, tileB.v);
			this.drawTileHigh(tileB.x * this.tiles.w, tileB.y * this.tiles.h, tileA.v);
			this.REC = false;
		}		
	},
	
	drawTile	: function(x, y, value){
		Draw.rect(Tools.newCoord(x, y), this.tiles.w, this.tiles.h, this.colors[value], this.colors[value]);
	},
	
	drawTileHigh	: function(x, y, value){
		Draw.rect(Tools.newCoord(x, y), this.tiles.w, this.tiles.h, this.colorsHigh[value], this.colorsHigh[value]);
	},

	drawTileFall	: function(x, y, value){
		Draw.rect(Tools.newCoord(x, y), this.tiles.w, this.tiles.h, this.colorsFall[value], this.colorsFall[value]);
	},
	
	drawTileEmpty	: function(x, y){
		this.drawTile(x, y, 0);
	},
	
	clearScreen	: function(){
		var coords = Tools.newCoord(0, 0);
		var w = this.screen.w;
		var h = this.screen.h-this.screen.bar;
		var dirA = coords;
		var dirB = Tools.newCoord(w, h);
		var colorA = Draw.rgbColor(100,90,90);
		var colorB = Draw.rgbColor(90,100,90);
		Draw.gradient(coords, w, h, dirA, dirB, colorA, colorB);
	}
}
